/* 底部悬浮tab容器 */
.floating-tabs {
    position: fixed;
    bottom: 0; /* 贴底边 */
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    width: 100%; /* 宽度为100%，左右和屏幕一致 */
    max-width: 600px; /* 最大宽度为600px，适应电脑端 */
    margin: 0 auto; /* 居中对齐 */
    background-color: #f8f8f8; /* 背景色与内容区稍微区分 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 5px 0;
    height: 50px; /* 缩小tab高度 */
}

/* 去掉圆角 */
.floating-tabs {
    border-radius: 0;
}

.floating-tab {
    flex: 1; /* 使 tab 等宽 */
    text-align: center;
    cursor: pointer;
    transition: color 0.3s ease; /* 点击时只变化文字颜色 */
    font-size: 14px;
}

.floating-tab:hover {
    background-color: #e6e6e6; /* 鼠标悬停时背景色变化 */
}

.floating-tab p {
    margin: 1px 0 0 0; /* 增加顶部间距，图标和文字之间有点空白 */
    font-size: 16px;
    transition: color 0.3s ease; /* 文字颜色过渡效果 */
}

.floating-tab.active p {
    color: #4CAF50; /* 激活时文字变色 */
}

.floating-tab p:hover {
    color: #4CAF50; /* 鼠标悬停时文字颜色变化 */
}

.floating-tab img {
    width: 24px; /* 图标宽度 */
    height: 24px; /* 图标高度 */
}
